<template>
  <div id="app">
    <el-menu theme="dark" class="el-menu-demo navs" mode="horizontal">
      <img src="../static/img/logo.png" alt="">
      <span class="logoText">ZYL@blog.com</span>
      <div>
        <el-button size="small">
          <router-link to='/register'>注册</router-link>
        </el-button>
        <el-button size="small">
          <router-link to='/login'>登录</router-link>
        </el-button>
        </div>
    </el-menu>
    <loading v-show="loading"></loading>
    <router-view class="main-body">
    </router-view>
  </div>
</template> 

<script>
import {mapGetters,mapActions} from 'vuex';
import loading from './components/loading'

export default {
  name: 'app',
  computed: mapGetters(['loading']),
  components:{
    loading
  }
}
</script>

<style>
body{
  margin:0;
  padding:0;
  width: 100%;
  height: 100vh;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
::-webkit-scrollbar { 
  width:7px; 
  height:7px;
}
::-webkit-scrollbar-track-piece { 
  background:#ddd;
}
::-webkit-scrollbar-thumb { 
  background:#999; 
  border-radius:4px;
}
#app{
  width: 100%;
  height:100%;
  position: relative;
}
.navs{
  position: fixed;
  width: 100%;
  z-index: 100;
}
.logoText{
  color: #fff;
  float: left;
  font-size: 26px;
  color: #20A0FF;
  margin-top:15px;
}
.el-menu-demo img{
  width: 40px;
  height:40px;
  float: left;
  margin:10px 10px;
}
.main-body{
  width: 100%;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.navs button{
  float: right;
  margin:15px 10px;
  background-color: transparent;
}
.navs a{
  color: #fff;
  text-decoration: none;
}
.navs a:hover,.navs button:hover a{
  color: #20A0FF;
}
</style>
